디자인 토큰 구조 정립 (typography, dimension, radius, color)#4
Conversation
ndaemy
left a comment
There was a problem hiding this comment.
- hierarchy가 피그마 시안과 맞지 않는 것 같아요. 제가 읽었을 때는 primitive/semantic → colors/typography.. 가 아니라 colors → primitive/semantic 이 맞는거 같은데, 지금 이 부분이 조금 불명확하게 정해진 것 같아서 논의를 조금 해봐야 할 거 같아요!
- 이미 만들어진 파일과 새로 만드는 파일이 단수/복수형 표기가 맞지 않아서 통일하면 좋을 것 같아요. 단수형이 나을 것 같습니다.
- $schema 의 부적절한/일관되지 않은 사용이 있습니다. 확인해보시고 수정 부탁드려요!
ndaemy
left a comment
There was a problem hiding this comment.
PR 리뷰: typography token
🔴 Critical
1. Typography 토큰이 빌드에 포함되지 않음
config.js의 source glob 패턴이 tokens/**/*.tokens.json*인데, 새로 추가된 파일 2개가 이 패턴에 매치되지 않습니다:
| 파일 | 패턴 매치 |
|---|---|
typography/style.jsonc |
❌ .tokens 누락 |
typography/typography.jsonc |
❌ .tokens 누락 |
실제로 빌드를 돌려보면 tokens.css에 typography 관련 CSS 변수가 하나도 생성되지 않습니다.
style.tokens.jsonc, typography.tokens.jsonc로 이름 변경이 필요합니다.
README에도 명시되어 있습니다: "파일 이름은
*.tokens.json(or*.tokens.jsonc) 이여야 합니다."
2. 파일명 오타: primitve → primitive
color/primitve.tokens.jsonc — "primitive" 철자가 틀렸습니다.
3. $schema 경로 오류
typography/typography.jsonc에서 "$schema": "schema.json"으로 참조하고 있는데, schema 파일은 tokens/schema.json에 위치합니다. typography/ 하위에서는 "../schema.json"이어야 합니다.
🟠 Major
4. Naming convention 위반 — PascalCase 사용
README 컨벤션: "Naming은 reserved name이 아니라면 kebab-case 를 사용합니다."
| 현재 (PascalCase) | 컨벤션 (kebab-case) |
|---|---|
Display1 |
display1 |
Title1 / Body1 |
title1 / body1 |
semiBold |
semi-bold |
기존 text.tokens.jsonc에서도 large-title, body1-regular 등 kebab-case를 사용하고 있었습니다.
피그마에서 PascalCase를 쓰더라도, 토큰 파일은 프로젝트 컨벤션에 맞춰야 합니다.
5. Typography 구조가 문서화된 컨벤션과 다름
README: "모든 typography는 별도의 객체로 감싸지 않습니다. (감쌀 경우 build 되는 css에 불필요하게 prefix가 붙습니다.)"
// ❌ 현재: 객체로 감싸고 있음
"Title1": {
"bold": { "$type": "typography", "$value": { ... } },
"regular": { "$type": "typography", "$value": { ... } }
}
// ✅ 컨벤션: flat + suffix
"title1-bold": { "$type": "typography", "$value": { ... } },
"title1-regular": { "$type": "typography", "$value": { ... } }만약 구조를 변경하기로 합의했다면, README도 함께 업데이트해주세요.
6. fontSize / lineHeight 토큰에 $type 누락
typography.jsonc의 fontSize, lineHeight 그룹에 $type 선언이 없습니다.
실질적으로 dimension 값("11px" 등)이므로 "$type": "dimension"이 있어야 스키마 검증이 동작합니다.
7. $schema 일관성 없음
| 파일 | $schema |
|---|---|
primitve.tokens.jsonc |
✅ 있음 |
typography.jsonc |
|
dimension.tokens.jsonc |
❌ 없음 |
radius.tokens.jsonc |
❌ 없음 |
style.jsonc |
❌ 없음 |
🟡 Minor
8. radius 토큰에 $type 누락
radius.tokens.jsonc의 토큰들이 dimension 참조({dimension.4})를 사용하지만, $type 선언이 없습니다.
9. 미사용 토큰: fontSize.t1 (11px)
정의만 되어 있고 style.jsonc의 어떤 typography에서도 참조하지 않습니다.
필요 없다면 제거, 앞으로 사용 예정이라면 코멘트로 남겨주세요.
10. Label3 / Caption2 사이즈 동일
둘 다 fontSize: t2 (12px), lineHeight: t2 (16px)이고 weight만 다릅니다 (semiBold vs bold).
의도한 것이라면 괜찮지만, 피그마 시안과 한 번 더 확인해주세요.
요약
| 우선순위 | 항목 수 | 핵심 |
|---|---|---|
| 🔴 Critical | 3 | 빌드 누락, 오타, 경로 오류 |
| 🟠 Major | 4 | 컨벤션 위반, $type/$schema 누락 |
| 🟡 Minor | 3 | 미사용 토큰, 확인 필요 항목 |
| "$type": "dimension", | ||
| "t1": { "$value": "11px" }, | ||
| "t2": { "$value": "12px" } | ||
| } |
There was a problem hiding this comment.
ദ്ദിᐢ. .ᐢ₎ 감사합니다 !!!!!
Summary
피그마 시안 기준으로 디자인 토큰을 구현하고, DTCG 스펙에 맞게 토큰 구조를 정립했습니다.
Changes
토큰 추가
토큰 수정
colors→color단수형 통일구조 개선
color/,dimension/,radius/,typography/)$type을 그룹 레벨에 선언하여 DTCG 스펙 준수 (개별 토큰 반복 제거)$schema참조 추가fontFamily제거 (폰트는 전역 관심사로 분리)문서화
tokens/README.md토큰 컨벤션 문서 작성$type선언 위치, 참조($value) 규칙, 폰트 전략 등Notes
dimension토큰의$value가 문자열("11px")로 되어 있어 DTCG schema의 객체 형식과 불일치 → 별도 이슈로 추적 예정--colors-*→--color-*breaking change이나, 아직 소비 코드 없음